<template>
	<view class="publish">
		<template v-if="isLoad">
			<form @submit="formSubmit" @reset="formReset">
				<view class="uni-form-item uni-column">
					<view class="title">标题</view>
					<input v-model="title" class="uni-input" name="title" placeholder="最少10个字" />
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">选择主题</view>
					<picker @change="bindPickerChange" :value="index" :range="names">
						<view class="uni-input">{{names[index]}}</view>
					</picker>
				</view>
				<view class="uni-form-item uni-column">
					<view class="title">正文</view>
					<textarea v-model="content" maxlength="99999" name="content" placeholder="支持markdown" />
				</view>
				<view class="uni-btn-v">
					<button type="primary" form-type="submit" :disabled="!(title.length>10 && content)">发 帖</button>
				</view>
			</form>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLoad: false,
				names: ['问答', '分享', '工作', '测试'],
				values: ['ask','share', 'job', 'dev'],
				index: 0,
				title: '',
				tab: '',
				content: '',
				topic_id: ''
			}
		},
		onShow (){
			// #ifdef MP-WEIXIN
			const result = this.$checkLogin()
			if(!result) return false
			// #endif
			
			this.topic_id = uni.getStorageSync('topic_update_id')
			this.topic_id && this.getTopicDetail()
			this.isLoad = true
		},
		onHide (){
			this.clear()
		},
		methods: {
			// clear
			clear (){
				this.topic_id = ''
				this.title = ''
				this.content = ''
				this.tab = ''
				this.index = 0
				uni.removeStorageSync('topic_update_id') 
			},
			// picker
			bindPickerChange: function(e) {
				this.index = e.target.value
				this.tab = this.values[this.index]
			},
			// 提交表单
			formSubmit: function(e) {
				const access_token = this.$store.state.access_token
				if(!access_token){
					return false
				}
				uni.showLoading({
					mask: true
				})
				const url = this.topic_id ? '/topics/update' : '/topics',
					  data = {
						  accesstoken: access_token,
						  title: this.title,
						  tab: this.tab || this.values[this.index],
						  content: this.content
					  }
				if(this.topic_id){
					data['topic_id'] = this.topic_id
				}
				this.$request.post(url, data)
					.then(result => {
						uni.hideLoading()
						uni.showToast({
							title: result.success ? '发布成功' : '发布失败，请重试'
						})
						if(result.success){
							this.clear()
						}
					})
			},
			// 编辑帖子，获取数据，填充
			getTopicDetail (){
				this.$request.get('/topic/'+ this.topic_id)
					.then(result => {
						if(result.success){
							const { data } = result
							this.title = data['title']
							this.content = data['content']
							this.tab = data['tab']
							this.index = this.values.indexOf(this.tab)
						}
					})
			}
		}
	}
</script>

<style lang="scss">
	.publish{
		background-color: #FFFFFF;
		.title{
			color: #333;
			font-weight: bold;
			font-size: 15px;
		}
		.uni-input{
			border-bottom: 1px solid #eee;
			height: 32px;
			line-height: 32px;
			font-size: 15px;
		}
		picker{
			.uni-input{
				color: #666;
			}
		}
		.textarea-placeholder{
			font-size: 15px;
		}
		textarea{
			min-height: 170px;
		}
		.uni-btn-v{
			padding: 0 2px;
			background-color: #F8F8F8;
			button,
			uni-button{
				border-radius: 0;
				&::after{
					border-radius: 0;
				}
			}
		}
	}
</style>
